<template>
    <div>
        <Row type="flex" style="margin-bottom: 10px" justify="start">
            <Button icon="md-add" style="margin-right: 10px" class="btnteacher"  type="primary" @click="modal.addModal=true">
                添加
            </Button>
            <Button icon="md-trash"  type="error" @click="deleteMoreteacher">
                批量删除
            </Button>
        </Row>
        <Row type="flex" justify="center">
            <Table :loading="loading" border :columns="MyCourseColums" @on-selection-change="changSelection" :data="MyCourseList">
                <template slot-scope="{ row }" slot="action">
                    <Button icon="md-build"  type="primary" size="small"
                            @click="updateCourse(row)" style="margin-right: 5px">修改
                    </Button>
                    <Button icon="md-trash"  type="error"
                            @click="clickdelete(row)" style="margin-right: 5px" size="small">删除
                    </Button>
                    <Button icon="ios-barcode" v-if="!row.isTrain"  type="info"
                            @click="opendirectory(row)" style="margin-right: 5px" size="small">目录
                    </Button>
                    <Button icon="logo-bitcoin" v-if="!row.isTrain" type="success"
                            @click="opencourseware(row)" style="margin-right: 5px" size="small">课件
                    </Button>
                    <Button icon="ios-bug" v-if="row.isTrain" type="warning"
                            @click="" style="margin-right: 5px" size="small">班级
                    </Button>
                </template>
            </Table>
            <Page style="margin-top:10px " show-sizer :total="total" @on-page-size-change="changeSize"
                  :page-size="courseMap.Tsize" @on-change="changePage" show-elevator/>
        </Row>
        <addmycourse :modal="modal"></addmycourse>
        <updatemycourse :modal = "modal" ></updatemycourse>
        <directory  :modal="modal" ></directory>
        <courseware ref="course" :modal="modal"></courseware>

    </div>
</template>
<script>
    import addmycourse from "@c/course/myCourse/addmycourse"
    import updatemycourse from "@c/course/myCourse/updatemycourse"
    import directory from "@c/course/myCourse/directory"
    import courseware from "@c/course/myCourse/courseware"

    export default {
            data(){
                return{
                    loading:false,
                    MyCourseList:[],
                    deleteIdList:[],
                    modal:{
                        addModal:false,
                        updateModal:false,
                        directory:false,
                        courseware:false,
                        courseDo:{}
                    },
                    total:0,
                    courseMap:{
                        Tpage:1,
                        Tsize:10
                    },
                    MyCourseColums:[
                        {type: 'selection', width: 60, align: 'center'},
                        {type: 'index', title: "序号", width: 70, align: 'center'},
                        {title: "课程名称", key: "courseName", sortable: true},
                        {title: "课程编号", key: "courseNumber", sortable: true},
                        {title: "课程介绍", key: "courseIntroduce", sortable: true},
                        {title: "课程所属类型", key: "courseIntroduce", sortable: true,
                            render:(h,params)=>{return <label>{params.row.courseTypeDo.courseTypeName}</label>}},
                        {title: "课程单价", key: "coursePrice", sortable: true,render:(h,params)=>{return params.row.coursePrice==0?<label>免费</label>:<label>{params.row.coursePrice}￥</label> }},
                        {title: "课程封面", key: "resourceDO_pic", align:'center', sortable: true,
                            render:(h,params)=>{
                            return <img style="width:50px;heigth:50px" src={params.row.resourceDO_pic.resourceUrl} />
                            }
                        },
                        {title: "授课老师", sortable: true,render:(h,params)=>{return <label>{params.row.teacherDO.teacherName}</label>}},
                        {title: '操作',slot: 'action',width: 340,align: 'center'}
                    ]
                }
            },
        methods:{
            /**
             * 获取全部的课程信息
             */
            getAllCourse(){
                this.loading = true
                //执行前判断登录人是不是超级管理，如果是者显示出授课老师，反之不显示
               if(!this.IsAdmin){
                   this.MyCourseColums.forEach((index,item)=>{
                       if(index.title=='授课老师'){
                           this.MyCourseColums.splice(item,1)
                       }
                   })
               }
               //获取全部的课程信息
                this.http.post("/mycourse/getAllCourse",this.qs.parse(this.courseMap)).then(res=>{
                    if(res.data){
                        this.MyCourseList = res.data.list
                        this.total = res.data.total
                        this.loading = false
                    }
                }).catch(res=>{
                    this.loading = false
                })
            },
            /**
             * 点击修改页面显示多少条的时候触发的事件
             * @param val
             */
            changeSize(val){
                this.courseMap.Tsize = val
                if(this.courseMap.Tpage==1){
                    this.getAllCourse()
                }
            },
            /**
             * 点击下一页
             */
            changePage(val){
                this.courseMap.Tpage = val
                this.getAllCourse()
            },
            /**
             * 点击删除按钮
             */
            clickdelete(val){
                this.deleteIdList = []
                this.deleteIdList.push(val.courseId)
                this.deleteCourse(this.deleteIdList)
            },
            /**
             *点击批量删除
             */
            deleteMoreteacher(){
                if(this.deleteIdList.length==0){
                    this.$Message.error("请先选择需要删除的信息")
                    return;
                }
                this.deleteCourse(this.deleteIdList)
            },
            /**
             * 删除逻辑
             * @param val
             */
            deleteCourse(val){
                let that = this
                that.$Modal.confirm({
                    title:"警告！",
                    content:"是否要删除信息",
                    onOk(){
                        that.http.post("/mycourse/deleteCourseById",that.qs.parse({"deleteIdList":val})).then(res=>{
                            if(res.data){
                                that.$Message.success("删除成功！！")
                                that.getAllCourse()
                            }else {
                                that.$Message.error("删除失败了哦")
                            }
                        })
                    },
                    onCancel(){
                        this.$Message.info("操作以取消")
                    }
                })
            },
            /**
             * 点击表格复选框触发的事件
             * @param val
             */
            changSelection(val){
                this.deleteIdList = []
                val.forEach(index=>{
                    this.deleteIdList.push(index.courseId)
                })
            },
            /**
             * 点击编辑按钮
             * @param row
             */
            updateCourse(row){
                this.modal.updateModal = true;
                this.modal.courseDo = row
            },
            /**
             * 点击目录按钮时候
             * @param val
             */
            directory(val){
                this.modal.directory = true
                this.modal.courseDo = val
            },
            /**
             * 打开目录
             * @param row
             */
            opendirectory(row){
                this.modal.courseDo = row
                this.modal.directory = true
            },
            /**
             * 打开课件
             * @param row
             */
            opencourseware(row){
                this.modal.courseDo = row
                this.modal.courseware = true
            }
        },
        created() {
            this.getAllCourse();
        },
        computed: {
            IsAdmin() {
                return this.$store.state.user.username == 'admin' ? true : false
            }
        },
        components:{
                addmycourse,
                updatemycourse,
                directory,
                courseware,
            }
    }
</script>

<style scoped>

</style>
